<html>
    <head>
        <style type="text/css">
         body {
           background-image:url=("http://img.photobucket.com/albums/v518/upingirlheaven/salarycopy.jpg");
           background-repeat:no-repeat;
           margin-top:6em;
           margin-left:6em
        }
        h1 {
            font-family:"Arial";
            text-align:center;
        }
        p {
           font-family:"Arial";
       }
        table {
           font-family:"Arial";
       }
        </style>
        
        
        <script type="text/javascript">
        <!--
        function validate_form ( )
        {
         valid = true;
         if ( document.categories.cat_job.value == "Choose a Field" )
         {
          alert ( "Please choose a field." );
          valid = false;
          }
         if ( document.categories.cat_school.value == "Choose Your School" )
         {
          alert ( "Please choose a school." );
          valid = false;
          }
         if ( document.categories.cat_gpa.value == "Choose Your GPA" )
         {
          alert ( "Please choose a GPA." );
          valid = false;
          }
         if ( document.categories.cat_region.value == "Choose Your Region" )
         {
          alert ( "Please choose a region." );
          valid = false;
          }
         return valid;
         }
        //-->
        </script>
        </head>
        
  <body background="http://img.photobucket.com/albums/v518/upingirlheaven/salarycopy.jpg">
    <p>Simlpy select your information from the drop-down menus below to find out an approximate salary!</p>
    
  	<form name="categories" action="/submit" method="get" onSubmit="return validate_form ( );">
        <table width=100 style="margin-left:80px; margin-top:70px">
        <tr>
        <td><b>Field: </b></td>
  		<td><select name="cat_job">
		{% for job in jobs %}
      		<option value="{{job}}">{{job}}</option>
      	{% endfor %}
      	</select></td>
        </tr>
        <tr>
        <td><b>College/University: </b></td>
      	<td><select name="cat_school">
      	{% for school in schools %}
      		<option value="{{school}}">{{school}}</option> 
      	{% endfor %}
      	</select></td>
      	</tr>
        <tr>
        <td><b>GPA: </b></td>
        <td><select name="cat_gpa">
        {% for gpa in GPAs %}
            <option value="{{gpa}}">{{gpa}}</option>
        {% endfor %}
        </select></td>
        </tr>
        <tr>
        <td><b>Region: </b></td>
        <td><select name="cat_region">
        {% for region in regions %}
            <option value="{{region}}">{{region}}</option>
        {% endfor %}
        </select></td>
        </tr>
        <tr>
        <td></td>
               
		<td><input type="submit" value="Submit"></td>
        
        </table>
	</form> 


  </body>
</html>